;
(function() {
  // @mouseenter="addbgcolor($event, index0)"
  // @mouseleave="removebgcolor"
  Vue.component('item', {
    template: `<div>
    <li v-for="(item0, index0) in model" class="framework-tree-list"  @click.stop.prevent="toggle(index0, item0, $event)">
      <div
        class="framework-title clearfix release"
        @mouseenter="addbgcolor($event, item0)"
        @mouseleave="hidehandle($event, item0)"
        :data-id="item0.id"
        :data-parentId="item0.parentId"
        :data-type="item0.type"
        :data-index="index0">
        <div class="pull-left ellipsis-1" style="width: 180px;">
          <span class="icon-Org-area icon-color" v-if="item0.type == 'DQ'" v-show="item0.flag"></span>
          <span class="icon-Org-company icon-color" v-if="item0.type == 'GS'" v-show="item0.flag"></span>
          <span class="cursor" v-if="item0.flag">{{ item0.shortName }}</span>
          <input v-if="!item0.flag" type="text" v-model="item0.shortName" class="framework-text cursor mr-10" />
          <span class="icon-Gm-confirm mr-5" v-if="!item0.flag" @click.stop.prevent="queryEditOrganization(item0)"></span>
          <span class="icon-Gm-cancel" v-if="!item0.flag" @click.stop.prevent="cancelEditOrganization(item0)"></span>
        </div>
        <div class="absolut" style="right:0px;top:0;z-index:8;" v-if="(item0.type == 'DQ') || (item0.type == 'JT')">
          <span class="icon--- pull-right line-height-45 mr-5 color-999 font-12" :class="{'icon-reg-90': iconShow.indexOf(item0.id) > -1}"></span>
        </div>
        <div class="absolute handle-key" style="right:0;top:0;z-index:9;" v-show="osbutton.indexOf(item0.id) > -1" v-if="item0.flag">
          <span class="icon-Org-account icon-color cursor mr-5 handle-key-addNode" @mouseenter.stop.prevent="showAddHandle(item0)" v-if="permissions.indexOf('c5') > -1"></span>
          <span class="icon-Gm-delete icon-color cursor mr-5" @click.stop.prevent="delOrganization(item0)" v-if="permissions.indexOf('c7') > -1"></span>
          <span class="icon-Gm-edit icon-color cursor" @click.stop.prevent="editOrganization(item0)" v-if="permissions.indexOf('c6') > -1"></span>
        </div>
        <div class="handle-button-wrap" v-if="item0.oflag">
          <div class="button-handle cursor" v-if="status == 'JT' || status == 'DQ'" v-show="dqFlag" @click.stop.prevent="createDQ(item0)">新建大区</div>
          <div class="button-handle cursor" v-if="status == 'DQ' || status == 'GS'" @click.stop.prevent="createGS(item0)">新建公司</div>
        </div>
      </div>

      <ul v-if="osshow.indexOf(item0.id) > -1">
        <item
          class="item"
          :key="index0"
          @change="getPidData"
          :model="item0.children">
        </item>
      </ul>
    </li>
    </div>`,
    props: {
      model: [Object, Array]
    },
    data: function() {
      return {
        open: false,
        index: 0,
        data: [],
        status: '',
        permissions: JSON.parse(window.localStorage.getItem('permissions')),
        osshow: [],
        osbutton: [],
        iconShow: []
      }
    },
    computed: {
      dqFlag() {
        let flag = true;
        if (oVue.data[0].type == 'DQ') {
          return false
        }
        return flag
      }
    },
    methods: {
      //点击展开并且调用下级菜单
      toggle: function(i, data, e) {
        if (this.index != i) {
          this.open = false
        }

        if (!data.flag) return

        this.index = i
        this.open = !this.open
        this.getPidData(data.id, data.type)

        if (this.osshow.indexOf(data.id) == -1) {
          this.osshow.push(data.id)
          this.iconShow.push(data.id)
          return
        }
        if (this.osshow.indexOf(data.id) > -1) {
          this.osshow.map((item0, index0) => {
            if (item0 == data.id) {
              this.osshow.splice(index0, 1)
              this.iconShow.splice(index0, 1)
            }
          })
          return
        }
      },
      getPidData(id, type) {
        this.$emit('change', id, type)
      },
      //背景色
      addbgcolor(e, data) {
        document.querySelector('.slideTop').style.display = 'block'
        document.querySelector('.slideTop').style.top = e.srcElement.offsetTop + 'px';

        if (this.osbutton.indexOf(data.id) == -1) {
          this.osbutton.push(data.id)
          return
        }
      },
      //隐藏
      hidehandle(e, data) {
        if (this.osbutton.indexOf(data.id) > -1) {
          this.osbutton.splice(this.osbutton.indexOf(data.id), 1)
          data.oflag = false
          return
        }
      },
      //显示编辑组织架构输入框
      editOrganization(data) {
        if ($('.framework-text').length) {
          hl.toast('请先保存')
          return
        }
        data.flag = !data.flag
        data.oflag = false
      },
      //编辑组织架构
      queryEditOrganization(data) {
        if (data.id) {
          this.hasId(data)
        }
        if (!data.id) {
          this.noHasId(data)
        }
      },
      //根据id来编辑或者新增组织架构
      hasId(data) {
        hlhttp.put({
          url: 'organization',
          data: {
            organization_id: data.id,
            short_name: data.shortName,
            pid: data.parentId,
            full_name: '#',
            logo: '#',
            province_id: '#',
            province_name: '#',
            city_id: '#',
            city_name: '#',
            district_id: '#',
            district_name: '#',
            address: '#',
            memo: '#',
            tel: '#',
            email: '#',
            bl: '#',
            finance_bank: '#',
            finance_card: '#',
            finance_name: '#'
          },
          success: (res) => {
            oVue.subData.map(item => {
              if (item.id == data.id) {
                item.shortName = data.shortName
              }
            })
            hl.toast('编辑公司架构成功')
            data.flag = true;
          }
        })
      },
      noHasId(data) {
        hlhttp.post({
          url: 'organization',
          data: {
            short_name: data.shortName,
            pid: data.parentId,
            type: data.type
          },
          success: () => {
            hl.toast('新增组织成功')
            oVue.subId = data.parentId;
            oVue.getdata()
          }
        })
      },
      //删除组织架构
      delOrganization(data) {
        hllayer.confirm('确认要删除该组织架构吗?', () => {
          hlhttp.delete({
            url: 'organization?organization_id=' + data.id + '&pid=' + data.parentId,
            success: () => {
              hl.toast('删除成功')
              this.removeFramework(data)
            }
          })
        })
      },
      //删除页面组织
      removeFramework(data) {
        document.querySelector('.slideTop').style.display = 'none'
        //爷爷为集团级别
        if (oVue.data[0].type == 'JT') {
          if (data.type == 'JT') {
            oVue.data = []
          }
          if (data.type == 'DQ') {
            oVue.data.map((item, index) => {
              item.children.map((item0, index0) => {
                if (item0.shortName == data.shortName) {
                  oVue.data[index].children.splice(index0, 1)
                }
              })
            })
          }
          //删除集团下面的公司
          if (data.type == 'GS') {
            oVue.data.map((item, index) => {
              item.children.map((item0, index0) => {
                item0.children.map((item1, index1) => {
                  if (item1.shortName == data.shortName) {
                    oVue.data[index].children[index0].children.splice(index1, 1)
                  }
                })
              })
            })
          }
        }
        //爷爷为大区级别
        if (oVue.data[0].type == 'DQ') {
          if (data.type == 'DQ') {
            oVue.data.map((item, index) => {
              if (item0.shortName == data.shortName) {
                oVue.data[index].children.splice(index0, 1)
              }
            })
          }
          //删除大区下面的公司
          if (data.type == 'GS') {
            oVue.data.map((item, index) => {
              item.children.map((item0, index0) => {
                if (item0.shortName == data.shortName) {
                  oVue.data[index].children.splice(index0, 1)
                }
              })
            })
          }
        }
        //爷爷为公司级别
        if (oVue.data[0].type == 'GS') {
          if (data.type == 'GS') {
            oVue.data.map((item, index) => {
              if (item0.shortName == data.shortName) {
                oVue.data[index].children.splice(index0, 1)
              }
            })
          }
        }
        for (let i = 0; i < oVue.subData.length; i++) {
          let item = oVue.subData[i];
          if (item.id == data.id) {
            oVue.subData.splice(i, 1)
            i--
          }
          if (data.type == 'DQ') {
            if (item.parentId == data.id) {
              oVue.subData.splice(i, 1)
              i--
            }
          }
        }
      },
      //取消编辑
      cancelEditOrganization(data) {
        if (data.id) {
          data.flag = true
        }
        if (!data.id) {
          this.removeFramework(data)
        }
      },
      //点击添加操作
      showAddHandle(data) {
        this.status = data.type
        data.oflag = true
      },
      //创建大区
      createDQ(data) {
        if (this.osshow.indexOf(data.id) == -1) {
          this.osshow.push(data.id)
        }
        data.oflag = false;
        if ($('.framework-text').length) {
          hl.toast('请先保存')
          data.oflag = false;
          return
        }
        //集团创建大区
        if (data.type == 'JT') {
          this.open = true;
          data.oflag = false;
          oVue.subId = data.id;
          if (!oVue.data[0].children.length) {
            oVue.getdata(() => {
              oVue.data[0].children.unshift({
                id: null,
                shortName: '',
                type: 'DQ',
                parentId: data.id
              })
            })
          }
          if (oVue.data[0].children.length) {
            oVue.data[0].children.unshift({
              id: null,
              shortName: '',
              type: 'DQ',
              parentId: data.id
            })
          }
          return
        }
        //大区创建大区
        if (data.type == 'DQ') {
          this.open = true;
          data.oflag = false;
          oVue.data[0].children.unshift({
            id: null,
            shortName: '',
            type: 'DQ',
            parentId: data.parentId
          })
        }
      },
      createGS(data) {
        if (this.osshow.indexOf(data.id) == -1) {
          this.osshow.push(data.id)
        }
        if ($('.framework-text').length) {
          hl.toast('请先保存')
          data.oflag = false;
          return
        }
        //大区创建公司
        this.open = true;
        if (oVue.data[0].type == 'JT') {
          if (data.type == 'DQ') {
            data.oflag = false;
            oVue.subId = data.id;
            oVue.data.map((item, index) => {
              item.children.map((item0, index0) => {
                if (item0.id == data.id) {
                  if (!oVue.data[index].children[index0].children.length) {
                    oVue.getdata(() => {
                      setTimeout(() => {
                        oVue.data[index].children[index0].children.unshift({
                          id: null,
                          shortName: '',
                          type: 'GS',
                          parentId: data.id
                        })
                      }, 300)
                    })
                  }
                  if (oVue.data[index].children[index0].children.length) {
                    setTimeout(() => {
                      oVue.data[index].children[index0].children.unshift({
                        id: null,
                        shortName: '',
                        type: 'GS',
                        parentId: data.id
                      })
                    }, 300)
                  }
                }
              })
            })
          }
        }

        if (oVue.data[0].type == 'DQ') {

          if (data.type == 'DQ') {
            data.oflag = false;
            oVue.subId = data.id;
            if (!oVue.data[0].children.length) {
              oVue.getdata(() => {
                oVue.data[0].children.unshift({
                  id: null,
                  shortName: '',
                  type: 'GS',
                  parentId: data.id
                })
              })
            }
            if (oVue.data[0].children.length) {
              oVue.data[0].children.unshift({
                id: null,
                shortName: '',
                type: 'GS',
                parentId: data.id
              })
            }
          }

          if (data.type == 'GS') {
            data.oflag = false;
            oVue.data.map((item, index) => {
              item.children.map((item0, index0) => {
                oVue.data[index].children.unshift({
                  id: null,
                  shortName: '',
                  type: 'GS',
                  parentId: data.parentId
                })
              })
            })
            return
          }
        }

        if (oVue.data[0].type == 'GS') {
          hl.toast('最高组织架构只能建一次')
          data.oflag = false;
          return
        }


        if (data.type == 'GS') {
          data.oflag = false;
          oVue.data.map((item, index) => {
            item.children.map((item0, index0) => {
              if (item0.id == data.parentId) {
                setTimeout(() => {
                  oVue.data[index].children[index0].children.unshift({
                    id: null,
                    shortName: '',
                    type: 'GS',
                    parentId: data.parentId
                  })
                }, 300)
              }
            })
          })
        }
      }
    },
    mounted() {}
  })
}())
